<template>
  <view class="contenter">
    <view class="content">
      <view class="user u-flex flex_bt" @click="userImg">
        <view class="name">我的头像</view>
        <view>
          <item-image :type="`1`" :img="user.userimg" :size="80"></item-image>
        </view>
      </view>
      <view class="phone">
        <view class="u-flex flex_bt u-pd-20 item" @click="deliverGoods(user,1)">
          <view class="name">我的昵称</view>
          <view class="u-flex">
            <view class="min">{{user.nickname}}</view>
            <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
          </view>
        </view>
        <view class="u-flex flex_bt u-pd-20 item" v-if="user.tname">
          <view class="name">我的职称</view>
          <view class="u-flex">
            <view class="min">{{user.tname}}</view>
          </view>
        </view>
        <view class="u-flex flex_bt u-pd-20 item" @click="deliverGoods(user,2)">
          <view class="name">我的手机号</view>
          <view class="u-flex">
            <view class="min">{{user.phone}}</view>
            <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
          </view>
        </view>
      </view>
      <view @click="passChange" class="pass u-flex flex_bt u-pd-20">
        <view class="name">修改密码</view>
        <view class="u-flex">
          <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
        </view>
      </view>
    </view>
    <u-modal v-model="showModal"
             @confirm="submit()"
             :mask-close-able="close"
             :confirm-style="style"
             :confirm-color="'#45806E'"
             :title="title"
             :show-title="true"
             ref="uModal"
             :async-close="true">
      <view class="slot-content">
        <view class="input u-margin-top-40  u-margin-bottom-40 "  v-if="text == 1">
          <u-input v-model="user.phone" placeholder="请输入手机号" type="text" :border="false" :height="88" />
        </view>
        <view class="input u-margin-top-40  u-margin-bottom-40 "  v-if="text == 2">
          <u-input v-model="user.nickname" placeholder="请输入名称" type="text" :border="false" :height="88" />
        </view>
        <view class="cha" @click.stop="closes">x</view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
name: "detail",
  data(){
    return{
      user:{
        userimg:'',
      },
      title:'',
      text:'',
      showModal:false,//发货弹框控制
    }
  },
  computed:{
    style(){
      return {
        width: '232rpx',
        height: '72rpx',
        background: '#45806E',
        borderRadius: '58rpx',
        color:'#fff',
        lineHeight:'72rpx',
        margin:'0 auto',
        marginBottom:'50rpx',
        flex: '0 1 232rpx',
      }
    },
    CanelStyle(){
      return {
        width: '232rpx',
        height: '72rpx',
        background: '#f2f2f2',
        borderRadius: '58rpx',
        color:'#000',
        lineHeight:'72rpx',
        margin:'0 auto',
        marginBottom:'50rpx',
        flex: '0 1 232rpx',
      }
    },
  },
  onLoad() {

  // 上传头像
    uni.$on('uAvatarCropper', path => {
      uni.uploadFile({
        url: 'https://yft.xibuts.cn/Uploads/imageUploads',
        filePath: path,
        name: 'image',
        success: (res) => {
          this.user.userimg = JSON.parse(res.data).data
          this.submit()
        }

      });
    })
    this.userData()

  },
  onUnload() {
    uni.$off('uAvatarCropper')
  },
  methods:{
    //修改名称
    deliverGoods(data,index){
      if(index == 1){
        this.text = 2 ;
        this.title='修改名称'
      } else {
        this.title='修改手机号'
        this.text = 1;
      }
      this.showModal = true
    },
    closes(){
      this.showModal = false
    },
    //修改信息
    submit(){
      let form = {
        nickname:this.user.nickname,
        userimg:this.user.userimg,
        phone:this.user.phone,
      }
      this.$api.updateUser(form).then(res=>{
        this.$u.toast('修改成功')
        this.closes()
      })
    },
    //获取个人信息
    userData(){
      let type = uni.getStorageSync('type')
      if(type == 2){
        //获取門店个人信息
        this.$api.storeData().then(res => {
          this.user = res.data
        })
      }else {
        //获取技师个人信息
        this.$api.userData(this.form).then(res => {
          this.user = res.data
        })
      }

    },
    //跳转修改密码
    passChange(){
      this.$u.route({
        url: '/pages/login/newPassword',
      });
    },
    // 修改头像
    userImg(){
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          let filePath = res.tempFilePaths[0]
          uni.navigateTo({
            url:'/pages/u-avatar-cropper/u-avatar-cropper?src='+filePath
          })
        }
      });
    }
  },
}
</script>

<style scoped lang="scss">
  .content{
    margin-top: 60rpx;
    padding: 0 32rpx;
    .user{
      height: 114rpx;
      background: white;
      border-radius: 8rpx;
      padding: 0 20rpx;
    }
    .name{
      font-size: 28rpx;
      color: #4B4B4B;
    }
    .min{
      color: #A2A2A2;
      font-size: 28rpx;
      margin-right: 20rpx;
    }

    .phone{
      background: white;
      margin-top: 20rpx;
      .item{
        border-bottom: 2rpx solid #F2F2F2;
        height: 95rpx;
      }
    }
    .pass{
      background: white;
      height: 88rpx;
      margin-top: 20rpx;
    }

  }

  .cha{
    position: absolute;
    right: 30rpx;
    top: 6rpx;
    font-size: 38rpx;
    color: #999;
  }
  .input{
    width: 520rpx;
    height: 88rpx;
    background: #F2F2F2;
    opacity: 1;
    border-radius: 58rpx;
    margin: 0 auto;
    padding: 0 46rpx;
    color: #707070;
    font-size: 32rpx;
  }
</style>